<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工序物料添加</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">

    <link href="/bootstraptable/bootstrap-table.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div style="width: 1200px;margin: 0 auto;">
        <h5 style="color: #3e79b6">您正在做的业务是：产品设计--产品工序物料设计--制定工序物料</h5>
    </div>

    <div class="panel panel-default">
        <form id="procedure_form" class="form-horizontal">
            <div class="panel-heading" style="text-align: right">
                <button type="button" id="procedure_submit_btn" class="btn btn-info">确定</button>
                <button type="button" id="return_btn" class="btn btn btn-info">返回</button>
            </div>
            <div class="panel-body">

                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label" >产品名称：</label>
                        <div class="col-sm-8">
                            <input readonly type="text" name="productName" id="productName"
                                   class="form-control text_no_border text_input"
                                   value="">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label" >产品编号：</label>
                        <div class="col-sm-8">
                            <input readonly type="text" name="productId" id="productId"
                                   class="form-control text_no_border text_input"
                                   value="">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">设计人：</label>
                        <div class="col-sm-8">
                            <input type="text" name="designer" id="designer"
                                   class="form-control text_bottom_border"
                                   value="">
                        </div>
                    </div>
                </div>
                <!--物料明细表格-->
                <table id="procedure_detail_table"></table>

                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">登记人：</label>
                        <div class="col-sm-8">
                            <input type="text" name="register" id="register"
                                   class="form-control text_bottom_border"
                                   value="">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">登记时间：</label>
                        <div class="col-sm-8">
                            <input type="text" name="registerTime" id="registerTime" class="form-control"
                                   value="">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">设计要求：</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" id="procedureDescribe" name="procedureDescribe"></textarea>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>


    <!--显示添加物料的模态框，查询所有的物料信息-->
    <div class="modal fade" id="procedure_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!--查询数据表格-->
                    <table id="procedure_list_table"></table>
                    <div class="panel-footer">
                        <button type="button" id="preview_btn2" class="btn btn-default">预览</button>
                        <button type="button" id="submit_btn" class="btn btn-default" data-dismiss="modal">确认</button>
                    </div>
                </div>
            </div>

            <div class="modal-footer">3</div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="/js/hAdmin.js?v=4.1.0"></script>
<!--<script type="text/javascript" src="/js/index.js"></script>-->

<!-- 第三方插件 -->
<script src="/js/plugins/pace/pace.min.js"></script>

<!--BootstrapTable-->
<script src="/bootstraptable/bootstrap-table.min.js"></script>
<script src="/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
    $(function () {
        // 从页面作用域取出id
        let id = localStorage.getItem("id")

        // 根据id查询对应的产品工序
        $.get("/design/procedure/designProcedureGetId", {"id": id}, function (data) {
            // 所有产品档案数据回显
            $("#procedure_form #productId").val(data.productId)
            $("#procedure_form #productName").val(data.productName)
            $("#procedure_form #designer ").val(data.designer)
            $("#procedure_form #register").val(data.register)
            $("#procedure_form #registerTime").val(data.registerTime)
            $("#procedure_form #procedureDescribe").val(data.procedureDescribe)
        }, "json")

        $("#procedure_detail_table").bootstrapTable({
            // 请求方式
            method: "post",
            // 内容类型：如果请求方式是post，内容类型必须是application/x-www-form-urlencoded
            contentType: "application/x-www-form-urlencoded",
            // 请求路径
            url: '/design/procedure/detailsList',
            // 数据行交替样式
            striped: true,
            // 是否是服务器端分页：server表示服务器端，client表示前端分页
            sidePagination: 'server',
            //初始化加载第一页
            pageNumber: 1,
            //是否分页
            pagination:true,
            // 单页记录数，页大小
            pageSize: 5,
            // 分页列表
            pageList: [2, 5, 10, 20],
            //刷新按钮
            // showRefresh:true,
            // 请求参数
            queryParams: function (params) {
                let obj = {
                    // params.limit获取组件中的页大小
                    // params.offset获取请求数据的起始索引
                    pageSize: params.limit,
                    pageNo: (params.offset / params.limit) + 1,
                    parentId:id
                }
                return obj;
            },
            columns: [{
                title: "工序序号",
                field: "detailsNumber"
            },{
                title: "工序编号",
                field: "procedureId",
                formatter: function (value, row, index) {
                    let html = `<a href="#">${value}</a>`
                    return html
                }
            },{
                title: "工序名称",
                field: "procedureName"
            },{
                title: "工时数",
                field: "labourHourAmount"
            },{
                title: "单位",
                field: "amountUnit"
            },{
                title: "单位工时成本",
                field: "costPrice"
            },{
                title: "工时成本小计",
                field: "subtotal"
            },{
                title: "物料成本小计",
                field: "moduleSubtotal"
            },{
                title: "添加物料",
                field: "",
                formatter:function (value, row, index) {
                    let html=`<a href="javascript:addModule(${index})">添加物料</a>`
                    return html
                }
            }]
        })

        //为添加物料预览按钮添加点击事件
        $("#preview_btn2").click(function () {
            //拿到所有物料数据
            let data=$("#procedure_list_table").bootstrapTable("getData")
            //拿到所有文本框
            let input=$("#procedure_list_table :input[name='amount']")
            for(let i=0;i<data.length;i++ ){
                if($(input[i]).val()!=""){
                    $(input[i]).parent().siblings("td:eq(4)").html(data[i].residualAmount-parseInt($(input[i]).val()))
                    $(input[i]).parent("td").html($(input[i]).val())
                    data[i].procedure_aount=parseInt($(input[i]).val())
                    if(data[i].residualAmount>=parseInt($(input[i]).val())){
                        data[i].residualAmount=data[i].residualAmount-parseInt($(input[i]).val())
                        console.log(data[i].procedure_aount * data[i].costPrice)
                        data[i].moduleSubtotal=data[i].procedure_aount * data[i].costPrice
                    }
                }else {
                    //根据下标删除指定列
                    $(input[i]).parent().parent("tr").remove()
                }
                console.log(data[i])
            }
        })
        //为确认按钮添加点击事件提交数据修改物料明细
        $("#submit_btn").click(function (){
                //拿到工序明细表格所有数据行
                let data= $("#procedure_detail_table").bootstrapTable("getData")
                //拿到所有物料数据
                let module=$("#procedure_list_table").bootstrapTable("getData")
                //拿到表格所有行
                let tr=$("#procedure_detail_table tr:gt(0)")
                let price=0
                for (let i=0;i<module.length;i++){
                    if(module[i].moduleSubtotal!=null){
                        price+=parseInt(module[i].moduleSubtotal)
                    }
                }
                let procedure_module_dto
                for(let i=0;i<data.length;i++){
                    if(data[i].add!=null && data[i].add!=0){
                        $(tr[i]).children("td:last").html(`<a href="#" onclick="addAgain(`+data[i].id+`)">重新制定</a>`)
                        $(tr[i]).children("td:eq(7)").html(price)
                        data[i].moduleSubtotal=price
                        data[i].add=0
                        procedure_module_dto=data[i]
                        //修改物料明
                        $.ajax({
                            url:"/design/module/upd_detail",
                            type:"post",
                            data: JSON.stringify(module),
                            contentType: "application/json",
                            success: function (data) {
                                console.log(data)
                            }
                        })
                    }
                }
                for (let i=0;i<module.length;i++){
                    module[i].subtotal = module[i].moduleSubtotal
                    module[i].amount=module[i].procedure_aount
                    procedure_module_dto.list=module
                    console.log(module)
                    console.log(procedure_module_dto)
                    console.log(i)
                }
                //添加工序物料明细
                $.ajax({
                    url:"/design/procedure/addModule",
                    type:"post",
                    data:JSON.stringify(procedure_module_dto),
                    contentType:"application/json",
                    success: function (data) {
                        console.log(data)
                    }
                })
            }
        )

        //为确认按钮添加点击事件
        $("#procedure_submit_btn").click(function () {
            //拿到工序明细表格所有数据行
            let data= $("#procedure_detail_table").bootstrapTable("getData")

            //设置物料总成本
            let moduleCostPriceSums=0;

            for (let i=0; i<data.length; i++) {
                //计算金额
                moduleCostPriceSums+= data[i].moduleSubtotal
            }
            data[i].moduleCostPriceSum.val(moduleCostPriceSums)

            $.ajax({
                url:"/design/procedure/upd_procedure_detail",
                type:"post",
                data:JSON.stringify(data),
                contentType:"application/json",
                success: function (data) {
                    window.location="design_procedure_module_unmake_listUI"
                }
            })
        })
    })
    //为重新制定链接绑定事件
    function addAgain(id){
        //删除数据库数据把可用数量重置
        console.log(id)
        $.ajax({
            url:"/design/procedure/delModule",
            type:"post",
            data:JSON.stringify(id),
            contentType:"application/json",
            success: function (data) {
                console.log(data)
            }
        })
        let module=$("#procedure_list_table").bootstrapTable("getData")
        for(let i=0;i<module.length;i++){
            let amount=module[i].amount+module[i].residualAmount
            module[i].amount=amount
            module[i].residualAmount=amount
        }
        //修改物料明
        $.ajax({
            url:"/design/module/upd_detail",
            type:"post",
            data: JSON.stringify(module),
            contentType: "application/json",
            success: function (data) {
                console.log(data)
            }
        })
        console.log(module)
        //刷新表格
        $("#procedure_list_table").bootstrapTable("refresh")
        $("#procedure_modal").modal("show")

    }
    // 为"添加物料"按钮绑定点击事件，弹出模态框
    function addModule(index) {
        //刷新表格
        $("#procedure_list_table").bootstrapTable("refresh")
        let data=$("#procedure_detail_table").bootstrapTable("getData")[index]
        //添加标志列判断是否点击
        data.add=data.detailsNumber
        // 弹出模态框
        $("#procedure_modal").modal("show")
        let productId=$("#procedure_form #productId").val()
        // 初始化dom刷新表格
        $("#procedure_list_table").bootstrapTable({
            // 请求方式
            method: "post",
            // 内容类型：如果请求方式是post，内容类型必须是application/x-www-form-urlencoded
            contentType: "application/x-www-form-urlencoded",
            // 请求路径
            url: '/design/procedure/getModuleById',
            // 数据行交替样式
            striped: true,
            // 是否是服务器端分页：server表示服务器端，client表示前端分页
            sidePagination: 'server',
            //初始化加载第一页
            pageNumber: 1,
            //是否分页
            pagination:true,
            // 单页记录数，页大小
            pageSize: 5,
            // 分页列表
            pageList: [2, 5, 10, 20],
            //刷新按钮
            // showRefresh:true,
            // 请求参数
            queryParams: function (params) {
                let obj = {
                    // params.limit获取组件中的页大小
                    // params.offset获取请求数据的起始索引
                    pageSize: params.limit,
                    pageNo: (params.offset / params.limit) + 1,
                    productId:productId
                }
                return obj;
            },
            // 表格列标题
            columns: [{
                title: "序号",
                field: "id",
                formatter: function (value, row, index) {
                    let html = `<a href="#">${value}</a>`
                    return html
                }
            },{
                title: "物料编号",
                field: "productId"
            },{
                title: "物料名称",
                field: "productName"
            },{
                title: "设计数量",
                field: "amount"
            },{
                title: "可用数量",
                field: "residualAmount"
            },{
                title: "单价",
                field: "costPrice"
            },{
                title: "本工序数量",
                field: "procedure_amount",
                formatter: function (value, row, index) {
                    let html=`<input name="amount" type="text">`
                    return html
                }
            }]
        })
    }

    //点击返回按钮
    $("#return_btn").click(function () {
        window.location="/procedure/design_procedure_module_unmake_listUI"
    })
</script>
</body>
</html>